<template>
  <div class="raceProblem">
    <el-table size="small" class="table" :data="problem" @row-dblclick="handlerToQues">
      <el-table-column width="40px" align="center">
        <template #default="scoped">
          <div class="status">
            <div v-if="format === 1">
              <i v-if="problemStatus[scoped.row.pid] === 'Accepted'" class="iconfont icon-gou good"></i>
            </div>
            <div v-else>
              <i v-if="problemStatus[scoped.row.pid] === 'Accepted'" class="good iconfont icon-gou"></i>
              <i v-else-if="problemStatus[scoped.row.pid] === 'UnAccepted'" class="bad iconfont icon-chahao1"></i>
              <i class="iconfont icon-henggang se" v-else-if="problemStatus[scoped.row.id] == 'System Error'"></i>
              <i class="iconfont icon-henggang blue" v-else-if="problemStatus[scoped.row.id] == 'Partial Accepted'"></i>
              <i class="iconfont icon-henggang orange" v-else-if="
                problemStatus[scoped.row.id] == 'Presentation Error' ||
                problemStatus[scoped.row.id] == 'Compile Error'
              "></i>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="50%">
        <template #default="scoped">
          <div>
            <i class="iconfont icon-icon_qiqiu2" :style="{ color: scoped.row.color }"></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" label="序号" width="100%"></el-table-column>
      <el-table-column prop="displayId" label="题目ID" align="center">
        <template #default="scoped">
          <span class="text" @click="handlerToQues(scoped.row)">{{
            scoped.row.displayId
          }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="displayTitle" label="题目" align="center"></el-table-column>
      <el-table-column prop="ioScore" label="通过率" align="center" v-if="
        format !== 1 ||
        store.oj.userData.authLevel === 2 ||
        (store.oj.userData.id === uid && store.oj.userData.authLevel !== 0)
      ">
        <template #default="scoped">
          <div v-if="problemAc[scoped.row.pid]">
            <n-progress type="line" indicator-placement="inside" :percentage="
              getPercent(
                parseInt(problemAc[scoped.row.pid].ac),
                parseInt(problemAc[scoped.row.pid].submitCount)
              )
            " color="rgb(105,187,98)" indicator-text-color="black"></n-progress>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {
  getRaceProblemAPI,
  getRaceProblemAcAPI,
  getRaceProblemStatusAPI,
} from "@/api/ojAPI/ojAPI"
import { onMounted, ref, defineExpose, defineProps, toRefs } from "vue"
import { debounce } from "@/utils/global.js"
import { useRoute } from "vue-router"
import { useRouter } from "vue-router"
import useStore from "@/store"
const router = useRouter()
const route = useRoute()
const store = useStore()

const props = defineProps({
  format: {
    type: Number,
    default: 1,
  },
  uid: {
    type: String,
    default: "",
  },
})
const { format, uid } = toRefs(props)
onMounted(() => {
  getRaceProblem()
})
const problem = ref([])
const getRaceProblem = debounce(async () => {
  if (!route.params.rid) {
    router.push('/home/race')
  }
  await getRaceProblemAPI(route.params.rid)
    .then((res) => {
      if (res.data.code === 200) {
        problem.value = res.data.data
        getRaceProblemAc()
        getRaceProblemStatus()
      }
    })
    .catch((err) => {
      console.log(err)
    })
}, 200)
const getPercent = (acCount, problemCount) => {
  if (problemCount == 0) {
    return 0
  }
  return Number(((((acCount * 100) / problemCount) * 100) / 100).toFixed(2))
}
const handlerToQues = (row) => {
  router.push({
    path: `/home/racePage/${route.params.rid}/problem/${row.pid}`,
    query: { proId: row.id },
  })
}
const problemAc = ref({})
const deboundTime = ref(null)
const getRaceProblemAc = () => {
  if (
    format.value === 1 &&
    store.oj.userData.authLevel !== 2 &&
    (store.oj.userData.authLevel === 0 || store.oj.userData.id !== uid.value)
  ) {
    return
  } else {
    if (deboundTime.value) {
      clearTimeout(deboundTime.value)
    }
    deboundTime.value = setTimeout(async () => {
      let data = []
      problem.value.forEach((item) => {
        data.push(item.pid)
      })
      await getRaceProblemAcAPI(route.params.rid, data).then((res) => {
        if (res.data.code === 200) {
          problemAc.value = res.data.data
        }
      })
    }, 300)
  }
}
const problemStatus = ref({})
const getRaceProblemStatus = debounce(async () => {
  let data = []
  problem.value.forEach((item) => {
    data.push(item.pid)
  })
  await getRaceProblemStatusAPI(route.params.rid, data).then((res) => {
    if (res.data.code === 200) {
      problemStatus.value = res.data.data
    }
  })
}, 200)
defineExpose({
  getRaceProblem,
})
</script>

<style lang="less" scoped>
.raceProblem {
  user-select: none;

  .table {
    height: 72vh;

    .status {
      display: flex;

      .good {
        color: #67c23a;
      }

      .bad {
        color: #ea4747;
      }

      .se {
        color: grey;
      }

      .red {
        color: rgb(228, 103, 102);
      }

      .blue {
        color: rgb(85, 158, 255);
      }

      .warn {
        color: #eaea47;
      }
    }
  }

  .text {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      color: rgb(46, 187, 84);
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
</style>
